<template>
	<view class="core" :style="initContainer()">
		<!-- 顶部标题 -->
		<u-navbar>
			<view slot="left">
				<view @click="goBack" class="navbar-left">
					<u-icon name="arrow-left" size="20"></u-icon>
					<span style="font-size: 1rem;">已处置</span>
				</view>
			</view>
		</u-navbar>

		<!-- 搜索 -->
		<view class="core_search">
			<u-search shape="round" :showAction="false" v-model="pageinfo.f_pername" @search="s_search()"></u-search>

			<view class="core_search_right">
				<view class="core_search_right_line"></view>
				<image @click.stop="popOpen" style="width: 1rem;; height: 1rem;"
					src='~@/static/images/correction/correction-warn-screen.png'>
				</image>
				<span @click.stop="popOpen">筛选</span>
			</view>

		</view>

		<!-- 内容 -->
		<scroll-view class="core_content" scroll-y @scrolltolower="scrolltolower">
			<view v-for="item in warnList" :key="item.id" class="core_content_card">

				<!-- 角标 -->
				<view :class="`core_content_card_hornicon ${item.horcolor}`">
					{{ item.hortext }}
				</view>

				<view class="core_content_card_top">
					<view class="core_content_card_top_left">
						<view class="core_content_card_top_left_type">
							<view v-for="item in item.typename" :key="item.id">{{item}}</view>
						</view>
					</view>
					<view class="core_content_card_top_right">
						<u-row class="core_content_card_top_right_row">

							<span class="core_content_card_top_right_row_name">{{item.pername}}</span>
							<!-- 罪名 -->
							<u-tag :text="item.crime" type="error" plain plainFill></u-tag>

						</u-row>
						<u-row class="core_content_card_top_right_row">
							<u-col class="core_content_card_top_right_row_label" span="4">
								处置单位
							</u-col>
							<u-col class="u-line-1" span="8" offset="-0.5">
								{{item.deptname}}
							</u-col>
						</u-row>
						<u-row class="core_content_card_top_right_row">
							<u-col class="core_content_card_top_right_row_label" span="4">
								预警地点
							</u-col>
							<u-col class="u-line-1" span="8" offset="-0.5">
								{{item.addr}}
							</u-col>
						</u-row>
					</view>
				</view>

				<view class="core_content_card_bottom">
					<u-row>
						<u-col class="core_content_card_bottom_lable" span="2.5">
							预警时间
						</u-col>
						<u-col span="6" offset="-0.1">
							{{item.rectime}}
						</u-col>
						<u-col span="2.8" offset="1">
							<view @click.stop="warnView(item)">
								<u-button class="core_content_card_bottom_button" style="letter-spacing: 0.2rem;"
									type="primary" shape="circle" text="详情"></u-button>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>

			<!-- 下拉显示提示控件 -->
			<view v-if="warnList.length != 0">
				<u-loadmore :status="status" :load-text="loadText" style="padding-bottom: 25rpx;" />
			</view>
		</scroll-view>


		<!-- 搜索组件 -->
		<CorrectionCondition ref="correctionConditionRef" @f_search="s_search" />


		<!-- 空状态 -->
		<u-empty class="core_empty" v-if="empty" text="暂无数据" src="/static/images/empty/content.png" icon-size="100">
		</u-empty>

		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 底部tabbar -->
		<tabBar :currentPagePath="this.$route.meta.pagePath"></tabBar>
	</view>
</template>

<script>
	import {
		queryList
	} from '@/common/api/correction/cre_work.js'
	import {
		saveCre_work_sup,
		batchSaveCre_work_sup
	} from '@/common/api/correction/cre_work_sup.js'
	import {
		Tp_crc_warn
	} from '@/common/enumeration/Tp_crc_warn.js'
	import {
		St_workValue
	} from '@/common/enumeration/St_work.js'
	import {
		Tp_crc_workValue
	} from '@/common/enumeration/Tp_crc_work.js'
	import {
		nanoid
	} from 'nanoid'

	import mixinList from '@/common/mixin/mixin-list.js'
	import mixinTool from '@/common/mixin/mixin-tool.js'

	export default {
		mixins: [mixinList, mixinTool],
		data() {
			return {
				pageinfo: {
					f_userid: undefined,
					f_status: undefined,
					f_pername: undefined, // 姓名
					f_addr: undefined, // 地点
					f_type: undefined, // 预警类型
					f_createtime: undefined, // 收到日期开始日期
					f_createtime_01: undefined, // 收到日期结束日期
					pageNumber: 1,
					pageSize: 20,
				},
				warnList: [], // 预警信息列表
			}
		},
		async onLoad() {
			this.showAnimation()
			this.pageinfo.f_userid = this.APPROVE_USER.userid
			this.pageinfo.f_status = [St_workValue.DONE]
			if (!this.APPROVE_USER.userid) {
				uni.navigateTo({
					url: "/pages/index"
				})
				return
			}
			this.queryList(this.pageinfo)
		},
		methods: {
			// 下拉触底
			scrolltolower() {
				this.pageinfo.pageNumber++;
				this.queryList(this.pageinfo);
			},
			// 预警详情
			warnView(record) {
				uni.navigateTo({
					url: `/pages/correction/CorrectionView?perid=${record.perid}&warnid=${record.warnid}&worktype=${record.worktype}`
				})
			},
			// 子组件搜索条件回显
			s_search(queryParam) {
				for (let key in queryParam) {
					this.pageinfo[key] = queryParam[key]
				}
				console.log('搜索', this.pageinfo)
				this.warnList = []
				this.pageinfo.pageNumber = 1
				this.showAnimation('请稍后')
				this.queryList(this.pageinfo)
			},
			// 查询列表数据
			async queryList(pageinfo) {
				const {
					data
				} = await queryList(pageinfo).finally(() => {
					this.hideAnimation()
				})
				console.log('列表数据', data)
				if (data.records && data.records.length > 0) {
					this.empty = false
					this.warnList = this.warnList.concat(data.records)
					if (this.warnList.length == data.total) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
					this.warnList.forEach(v => {
						// 角标颜色和字
						if (v.worktype == Tp_crc_workValue.CANCEL) {
							v.horcolor = 'hornicon_wrong'
							v.hortext = '系统误报'
						} else if (v.worktype == Tp_crc_workValue.DONE) {
							v.horcolor = 'hornicon_finish'
							v.hortext = '已核实'
						} else {
							v.horcolor = 'hornicon_wrong'
							v.hortext = '未知'
						}

						// 预警类型两个字一组
						if (v.type in Tp_crc_warn) {
							let typenameArr = []
							let tempStr = ''
							Tp_crc_warn[v.type].name.split('').forEach((j, index) => {
								tempStr += j
								if (index % 2 != 0) {
									typenameArr.push(tempStr)
									tempStr = ''
								}
							})
							v.typename = typenameArr
						} else {
							v.typename = '未知'
						}
					})
					console.log('this.status', this.status)
				} 
				if (!this.warnList || this.warnList.length == 0) {
					this.empty = true
					this.warnList = []
					console.log('this.empty ', this.empty)
				}

			},
			// 打开筛选框
			popOpen() {
				// this.popShow = true
				this.$refs.correctionConditionRef.f_popOpen()
			},
			// 初始化页面宽高
			initContainer() {
				return `width: ${window.screen.width}px; height: ${window.screen.height}px;`
			}
		},
		components: {
			CorrectionCondition: () => import('@/components/correction/CorrectionCondition')
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tag {
		height: 34rpx !important;
	}

	::v-deep .u-search__content {
		height: 2.3rem;
	}

	::v-deep .u-search {
		width: 93%;
	}

	::v-deep .u-button {
		background-color: #2074D4;
		border-color: #2074D4;
	}

	::v-deep .u-textarea {
		height: 90%;
	}

	::v-deep .u-button__text {
		font-size: 18px !important
	}

	@import '@/static/css/flex.scss';

	.popup {
		width: 20rem;
		height: 20rem;

		&_title {
			height: 16%;
			// border: 1px solid red;
			@extend .algin_justity_center;
			font-size: 1.2rem;
		}

		&_input {
			height: 60%;
			// border: 1px solid red;
			margin: 0% 0 0% 0;
			padding: 2% 6%;
		}

		&_button {
			height: 16%;
			// border: 1px solid black;
			width: 100%;
			@extend .space_around;
			align-items: center;

			&_itemone,
			&_itemtwo {
				width: 40%;
				height: 80%;
				@extend .algin_justity_center;
				border-radius: 10px;
				color: #fff;
			}

			&_itemone {
				background-color: #b3b3b4;
			}

			&_itemtwo {
				background-color: #1a75d5;
			}
		}
	}

	.core {
		// background-color: red;

		// 搜索框
		&_search {
			width: 100%;
			padding-top: 3%;
			height: 6%;
			position: fixed;
			background-color: #fff;
			position: relative;
			// border: 1px solid red;
			padding-left: 3.5%;

			&_right {
				height: 28%;
				top: 1.4rem;
				right: 2.8rem;
				@extend .algin_justity_center;
				position: absolute;
				// border: 1px solid red;

				&_line {
					height: 100%;
					border-right: 0.1rem solid #b7b9ba;
					margin-right: 0.6rem;
					// border: 1px solid red;
				}
			}

			&_right span {
				color: #3296FA;
				margin-left: 0.5rem;
			}
		}

		&_empty {
			// border: 1px solid red;
			height: 20%;
			z-index: 9999;
			position: fixed;
			top: 40%;
			left: 36%;

		}

		// 主体内容
		&_content {
			padding-top: 4%;
			width: 100%;
			height: 78%;
			overflow: auto;
			background-color: #f0f2f5;
			display: flex;
			flex-direction: column;
			align-items: center;

			&_card {
				width: 100%;
				box-shadow: 0rpx 4rpx 10rpx #ccc;
				border-radius: 20rpx;
				background-color: #ffffff;
				padding: 10rpx 40rpx;
				margin: 0 auto;
				margin-bottom: 30rpx;
				width: 84%;
				height: 19%;
				position: relative;
				font-size: 0.9rem;
				min-width: 300px;
				min-height: 140px;

				&_top {
					height: 60%;
					display: flex;
					box-sizing: border-box;

					&_left {
						width: 28%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						&_type {
							color: #fff;
							width: 76%;
							height: 86%;
							background-color: #3296FA;
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							flex-direction: column;
							font-size: 1.2rem;
						}
					}

					&_right {
						width: 72%;
						height: 100%;

						&_row {
							margin: 1% 0;

							&_name {
								font-size: 1.2rem;
								margin-right: 0.6rem;
							}

							&_label {
								color: #a1a1a1;
							}
						}
					}


				}

				&_bottom {
					margin-top: 4%;

					&_lable {
						color: #b6b6b6;
					}

					&_button {
						// border: 1px solid red;
						width: 90%;
						height: 30px;
					}
				}

				// 勾选框
				&_checkbox {
					position: absolute;
					top: 0.5rem;
					left: 0.6rem;
					// width: 2rem;
					// height: 2rem;
					// border: 1px solid red;

				}

				// 角标
				&_hornicon {
					position: absolute;
					top: 0;
					right: 0;
					width: 5rem;
					height: 2rem;
					border-top-right-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					@extend .algin_justity_center;
					font-size: 24rpx;
					color: #fff;
				}

				// 角标
				&_hornicon {
					position: absolute;
					top: 0;
					right: 0;
					width: 5rem;
					height: 2rem;
					border-top-right-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					@extend .algin_justity_center;
					font-size: 24rpx;
					color: #fff;
				}

				// 误报颜色
				.hornicon_wrong {
					background-color: #696969;
				}

				// 核实颜色
				.hornicon_finish {
					background-color: #00b952;
				}
			}
		}


	}
</style>